<template>
  <div class="search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="搜索你想听的歌曲"
        @input="onSearch"
        @cancel="onCancel"
      />
    </form>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      list: [],
    };
  },
  methods: {
    onSearch() {
      if (this.value) {
        fetch("http://localhost:3000/search?keywords=" + this.value)
          .then((res) => res.json())
          .then((res) => {
            // console.log(res.result.songs);
            this.list = res.result.songs;
          });
      } else {
        this.list = "";
      }
    },
    onCancel() {
      this.$router.push({
        name: "Home",
      });
    },
  },
};
</script>

<style scoped>
.van-search__content {
  border-radius: 35px;
}
</style>
